<template>
    <!-- v-click-outside="onClickBodyOut" -->
    <div class="writing-body" :style="{ transform: firstShow && show ? 'translateX(0)' : '' }"
        :class="[isShowArrow && 'writing-body-fixed']">
        <div class="writing-title">
            <div class="top-left">
                <div class="title">{{ $t('message.text.writing') }}</div>
                <!-- <div class="search-box" :class="[searchFocus && 'search-box-focus']" @click="changeFocus">
                    <svg class="search-icon">
                        <use xlink:href="#keowledge-sousuo"></use>
                    </svg>
                    <div class="line"></div>
                    <el-input ref="searchInput" v-model="searchText" placeholder="输入检索内容" @blur="inputBlur" @input="searchTextChange"></el-input>
                </div>
                <div class="search-type-box">
                    <el-select v-model="searchType" @change="searchTypeChange">
                        <el-option v-for="(item,index) in searchTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div> -->
            </div>
            <div class="top-right">
                <!-- <svg class="hidden-icon" v-if="isShowArrow"  @click="showArrowButton">
                    <use xlink:href="#keowledge-shousuo"></use>
                </svg> -->
                <svg class="close-icon" @click="handleClose">
                    <use xlink:href="#keowledge-danchuangguanbi1"></use>
                </svg>
            </div>
        </div>
        <div class="wirting-search-title">
            <div class="search-box" :class="[searchFocus && 'search-box-focus']" @click="changeFocus">
                <svg class="search-icon">
                    <use xlink:href="#keowledge-sousuo"></use>
                </svg>
                <div class="line"></div>
                <el-input ref="searchInput" v-model="searchText" :placeholder="$t('message.placeholder.enterSearch')"
                    @blur="inputBlur" @input="searchTextChange"></el-input>
            </div>
            <div class="search-type-box">
                <el-select v-model="searchType" @change="searchTypeChange">
                    <el-option v-for="(item, index) in searchTypeList" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
        </div>
        <div class="writing-content-box" v-loading="searchBody">
            <el-scrollbar ref="writScroll" v-show="!enterFile" class="wirting-list-box">
                <div v-for="(item, index) in writList" :key="index" class="writ-item">
                    <div class="writ-item-title" @click="openFile(item)">
                        <filePng :type="item.type" :nameSuffix="item.nameSuffix" :id="`writ-file-${index}`"
                            @load="imgLoadSuccess(index)"></filePng>
                        <span v-html="`${item.name}`"></span>
                    </div>
                    <div class="writ-item-content" v-html="item.content" :id="`writ-content-${index}`"></div>
                </div>
                <div class="more-loading-box" v-if="searchPage.current != 1 && moreLoading">
                    <img class="refresh-img" src="@/assets/common/loading-page.gif">
                </div>
                <jvs-empty v-if="writList.length == 0" imgSrc="@/assets/images/common/searchEmpty.png"
                    :text="$t('message.empty.nullSearch')"></jvs-empty>
            </el-scrollbar>
            <div class="writing-view-content" v-if="enterFile">
                <div class="view-title">
                    <svg class="back-icon" @click="back">
                        <use xlink:href="#keowledge-fanhuishangyiji"></use>
                    </svg>
                    <div class="line"></div>
                    <filePng :type="openFileItem.type" :nameSuffix="openFileItem.nameSuffix"></filePng>
                    <span>{{ openFileItem.name }}</span>
                </div>
                <div class="view-body" v-loading="viewFileLoading">
                    <el-scrollbar>
                        <fileView :docInfo="openFileItem" v-if="openFileItem" :isWrit="true"
                            @renderFinish="renderFinish"></fileView>
                    </el-scrollbar>
                </div>

            </div>
        </div>
        <div class="fiexd-button-box" v-if="isShowArrow">
            <img src="../../assets/images/common/writ.png" class="hidden-icon" @click="showArrowButton" v-if="show">
            <img src="../../assets/images/common/showwrit.png" class="hidden-icon" @click="openArrow" v-if="!show">
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    nextTick,
    onBeforeUnmount,
    getCurrentInstance
} from 'vue'
import type { ComponentInternalInstance } from 'vue'
import { documentSearch } from '@/api/common'
import { useRouter } from "vue-router"
import ColorThief from 'colorthief'
import fileView from '@/views/common/fileView.vue'
import { ClickOutside as vClickOutside } from 'element-plus'
import filePng from '@/views/common/filePng.vue'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const colorThief = new ColorThief()
const router = useRouter();
const emit = defineEmits(["close", "changeArrow"])
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    isShowArrow: {
        type: Boolean,
        default: false
    },
    searchVal: {
        type: String,
        default: ''
    }
})
const searchTypeList = [{
    label: $t('message.typeMenu.fuzzySearch'),
    value: "1"
}, {
    label: $t('message.typeMenu.accurateSearch'),
    value: "2"
}]
const searchFocus = ref(false)
const searchType = ref('1')
const searchText = ref('')
const searchPage = ref({
    size: 30,
    current: 1,
    total: 0
})
const searchInput = ref()
const enterFile = ref(false)
const openFileItem = ref({})
const searchBody = ref(false)
const firstShow = ref(false)
const writScrollTop = ref(0)
const writList = ref([])
const moreLoading = ref(false)
const writScroll = ref()
const viewFileLoading = ref(false)
// const httpXhr = ref<XMLHttpRequest>()
onMounted(() => {
    proxy.$eventBus.$on('setSearchText', setSearchText)
    searchText.value = props.searchVal
    getWritList()
    nextTick(() => {
        firstShow.value = true
        writScroll.value.wrapRef.addEventListener("scroll", e => {
            const scrollTop = e.target.scrollTop
            const scrollHeight = e.target.scrollHeight
            const clientHeight = e.target.clientHeight
            if (
                scrollTop > scrollHeight - clientHeight - 10 &&
                scrollTop > writScrollTop.value &&
                !moreLoading.value && searchPage.value.current < Math.ceil(searchPage.value.total / searchPage.value.size)
            ) {
                searchPage.value.current++
                getWritList(false)
            }
            writScrollTop.value = scrollTop
        })
    })
})
onBeforeUnmount(() => {
    proxy.$eventBus.$off('setSearchText', setSearchText)
})
watch(() => props.searchVal, (newV) => {
    setSearchText(newV)
})
function getWritList(type = true) {
    if (type) searchBody.value = true
    moreLoading.value = true
    documentSearch({
        timeScope: null,
        searchType: searchType.value,
        searchContentType: null,
        type: null,
        shareRole: null,
        keyword: searchText.value,
        size: searchPage.value.size,
        current: searchPage.value.current,
        search: false,
        sameTenant: false,
        isNotNull: true
    }).then(res => {
        if (res.data.code == 0) {
            let temp = res.data.data.records || []
            temp.forEach(item => {
                item.showMore = false
            });
            writList.value.push(...temp)
            searchPage.value.total = res.data.data.total
        }
    }).finally(e => {
        moreLoading.value = false
        searchBody.value = false
    })
}
function searchTypeChange() {
    writList.value = []
    writScrollTop.value = 0
    searchPage.value = {
        size: 30,
        current: 1,
        total: 0
    }
    getWritList()
}
function handleClose() {
    emit("close")
}
const searchTextChange = proxy.$lodash.debounce(() => {
    // if(httpXhr.value) httpXhr.abort()
    enterFile.value = false
    openFileItem.value = {}
    writList.value = []
    writScrollTop.value = 0
    searchPage.value = {
        size: 30,
        current: 1,
        total: 0
    }
    getWritList()
}, 200)
function changeFocus() {
    searchFocus.value = true
    searchInput.value.focus()
}
function inputBlur() {
    searchFocus.value = false
}
function imgLoadSuccess(index) {
    let imgDom = document.getElementById(`writ-file-${index}`)
    let arr = colorThief.getColor(imgDom)
    document.getElementById(`writ-content-${index}`).style.borderLeftColor = `rgba(${arr.join(',')},1)`
}
function openFile(item) {
    enterFile.value = true
    openFileItem.value = item
    openFileItem.value.id = item.docId
    viewFileLoading.value = true
    // if(item.type==)
}
function renderFinish() {
    viewFileLoading.value = false
}
function back() {
    enterFile.value = false
    openFileItem.value = {}
    // if(httpXhr.value) httpXhr.abort()
}
function showArrowButton() {
    emit('changeArrow', true)
}
function openArrow() {
    emit('changeArrow', false)
}
function setSearchText(val) {
    searchText.value = val
    searchTextChange()
}
function onClickBodyOut() {
    if (props.isShowArrow) {
        showArrowButton()
    }
}
</script>
<style lang="scss" scoped>
.writing-body {
    min-width: 500px;
    height: 100%;
    width: calc(100% - 980px);
    background-color: #fff;
    transition: transform .2s;
    transform: translateX(100%);
    position: relative;

    .writing-title {
        padding: 0px 24px 0 24px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // border-bottom: 1px solid #eeeff0;
        .top-left {
            display: flex;
            align-items: center;

            .title {
                color: #3d3d3d;
                font-size: 16px;
                @include SourceHanSansCN-Bold;
            }
        }

        .top-right {
            .hidden-icon {
                cursor: pointer;
                width: 16px;
                height: 16px;
                margin-right: 8px;
            }

            .close-icon {
                cursor: pointer;
                width: 16px;
                height: 16px;
            }
        }
    }

    .wirting-search-title {
        display: flex;
        align-items: center;
        margin: 0px 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #eeeff0;

        .search-box {
            display: flex;
            align-items: center;
            height: 30px;
            background: #F5F6F7;
            border-radius: 4px 4px 4px 4px;
            // max-width: 324px;
            width: calc(100% - 135px);
            // margin-left: 8px;
            padding-right: 8px;
            border: 1px solid transparent;
            cursor: pointer;

            .search-icon {
                width: 16px;
                height: 16px;
                margin: 0px 13px 0 14px;
            }

            .line {
                width: 1px;
                height: 14px;
                background: #C2C5CF;
            }

            ::v-deep(.el-input) {
                .el-input__wrapper {
                    box-shadow: none !important;
                    background-color: transparent !important;
                }
            }
        }

        .search-box-focus {
            border-color: #1E6FFF;
        }

        .search-type-box {
            width: 100px;
            margin-left: 28px;
            background: #F5F6F7;
            border-radius: 4px;
            overflow: hidden;

            ::v-deep(.el-select) {
                .el-input__wrapper {
                    height: 30px !important;
                    background-color: transparent !important;
                    box-shadow: none !important;
                }
            }
        }
    }

    .writing-content-box {
        height: calc(100% - 152px);

        .writ-item {
            padding: 8px 24px;

            .writ-item-title {
                display: flex;
                align-items: center;
                cursor: pointer;

                img {
                    width: 16px;
                    height: 16px;
                }

                span {
                    color: #363B4C;
                    white-space: nowrap;
                    /* 不换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                    font-size: 12px;
                    color: #363b4c;
                    margin-left: 8px;

                    ::v-deep(em) {
                        color: #1E6FFF;
                        font-style: normal;
                    }
                }
            }

            .writ-item-content {
                margin-top: 8px;
                background: #fff;
                border-radius: 6px 6px 6px 6px;
                padding: 4px 16px;
                overflow: hidden;
                border: 2px solid #EEEFF0;
                border-left: 2px solid;
                // white-space: nowrap; /* 不换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                /* 显示3行文本 */
                max-height: 78px;
                min-height: 66px;

                ::v-deep(em) {
                    color: #1E6FFF;
                    font-style: normal;
                }
            }
        }

        ::v-deep(.wirting-list-box) {
            .el-scrollbar__view {
                height: 100%;
            }
        }

        .more-loading-box {
            width: 100%;
            // padding-right: 24px;
            text-align: center;
            height: 28px;

            // height: 40px;
            img {
                width: 80px;
            }
        }
    }

    .fiexd-button-box {
        position: absolute;
        left: -24px;
        top: 50%;
        transform: translateY(-50%);

        .hidden-icon {
            cursor: pointer;
            width: 24px;
            height: 48px;
            margin-right: 8px;
        }
    }

    .writing-view-content {
        height: 100%;

        .view-title {
            display: flex;
            align-items: center;
            height: 40px;
            border-bottom: 1px solid #EEEFF0;
            padding: 0px 8px;

            img {
                width: 16px;
                height: 16px;
                margin-right: 8px;
            }

            .line {
                width: 1px;
                height: 8px;
                background: #959DA4;
                margin: 0px 8px;
            }

            span {
                color: #363B4C;
                font-size: 12px;
                white-space: nowrap;
                /* 不换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
            }

            .back-icon {
                width: 16px;
                height: 16px;
                cursor: pointer;
            }
        }

        .view-body {
            // padding: 8px;
            height: calc(100% - 41px);

            .file-view-box {
                padding: 8px 16px 8px 8px;
            }
        }
    }
}

.writing-body-fixed {
    position: fixed;
    right: 0px;
    z-index: 200;
    background-color: #fff;
    box-shadow: 0px 1px 10px 0px rgba(54, 59, 76, 0.15);
}
</style>